<template>
  <div v-if="copeStatus">
    <div class="clearfix dialog">
      <div class="content-warp">
        <div class="header">{{title}}</div>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </div>
    <div class="overburden" @click="changeStatus"></div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '提示'
      },
      open: {
        type: Function
      },
      value: {
        type: Boolean
      }
    },

    data () {
      return {
        copeStatus: this.status
      }
    },

    computed: {
      status () {
        return this.value;
      }
    },

    methods: {
      changeStatus() {
        this.copeStatus = !this.copeStatus
      }
    },

    watch: {
      status (val, oldVal) {
        this.copeStatus = !this.copeStatus
        if (this.copeStatus) {
          this.open && this.open();
        }
      }
    }
  }
</script>
<style scoped="dialog" lang="scss">
  @import '../styles/common/common';
  .dialog {
    .content-warp {
      position: fixed;
      z-index: 901;
      width: 80%;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      margin:0 auto;
      min-height: px2rem(300);
      background-color: #fff;
      @include borderRadius(px2rem(5));
      .header {
        position: relative;
        @include border1px(bottom, #ccc);
        padding: px2rem(20);
      }
      .content {
        padding: px2rem(20);
      }
    }
  }
  .overburden {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 900;
    background-color: rgba(0, 0, 0, .5);
    margin-top: 0!important;
  }
</style>
